<template>
	<DesignPageComponent class="form-designer-page" v-if="componentModel.type=='page'" :componentModel="componentModel">
		<draggable :list="componentModel.children"
			v-bind="{group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}"
			@add="onAddComponentHandler">
			<DesignComponentFactory :componentModel="childComponentModel"
				v-for="(childComponentModel) in componentModel.children" :key="childComponentModel.id">
			</DesignComponentFactory>
		</draggable>
	</DesignPageComponent>
	<DesignLabelComponent v-else-if="componentModel.type=='label'" :componentModel="componentModel">

	</DesignLabelComponent>
	<DesignNavBarComponent v-else-if="componentModel.type=='mnavbar'" :componentModel="componentModel">

	</DesignNavBarComponent>
	<DesignTextComponent v-else-if="componentModel.type=='text'" :componentModel="componentModel">

	</DesignTextComponent>
	<DesignNumberComponent v-else-if="componentModel.type=='number'" :componentModel="componentModel">

	</DesignNumberComponent>
	<DesignSelectComponent v-else-if="componentModel.type=='select'" :componentModel="componentModel">

	</DesignSelectComponent>
	<DesignSearchComponent v-else-if="componentModel.type=='search'" :componentModel="componentModel">

	</DesignSearchComponent>
	<DesignDatetimeComponent v-else-if="componentModel.type=='datetime'" :componentModel="componentModel">

	</DesignDatetimeComponent>
	<DesignDateComponent v-else-if="componentModel.type=='date'" :componentModel="componentModel">

	</DesignDateComponent>
	<DesignTimeComponent v-else-if="componentModel.type=='time'" :componentModel="componentModel">

	</DesignTimeComponent>
	<DesignButtonComponent v-else-if="componentModel.type=='button'" :componentModel="componentModel">

	</DesignButtonComponent>
	<div v-else-if="componentModel.type=='tabcontrol'" :class="[selected ?'tabs-selected-state' : 'tabs-normal-state']"
		@click.stop="onTabsClickHandler">
		<van-tabs style="min-height: 200px;" @click-tab="onTabClick">
			<van-tab :componentModel="childComponentModel" :title="childComponentModel.labelExpression"
				v-for="(childComponentModel) in componentModel.children" :key="childComponentModel.id"
				:name="childComponentModel.id+''">
				<DesignComponentFactory :componentModel="childChildComponentModel"
					v-for="(childChildComponentModel) in childComponentModel.children"
					:key="childChildComponentModel.id"></DesignComponentFactory>
			</van-tab>
		</van-tabs>
	</div>
	<template v-else-if="componentModel.type=='row'">
		<draggable :list="componentModel.children"
			v-bind="{group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}"
			@add="onAddComponentHandler">
			<DesignRowComponent :componentModel="componentModel">
				<DesignComponentFactory :componentModel="childComponentModel"
					v-for="(childComponentModel) in componentModel.children" :key="childComponentModel.id">
				</DesignComponentFactory>
			</DesignRowComponent>
		</draggable>
	</template>
	<template v-else-if="componentModel.type=='col'">
		<draggable :list="componentModel.children"
			v-bind="{group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}"
			@add="onAddComponentHandler">
			<DesignColComponent :componentModel="componentModel">
				<DesignComponentFactory :componentModel="childComponentModel"
					v-for="(childComponentModel) in componentModel.children" :key="childComponentModel.id">
				</DesignComponentFactory>
			</DesignColComponent>
		</draggable>
	</template>
	<DesignTextareaComponent v-else-if="componentModel.type=='textarea'" :componentModel="componentModel">

	</DesignTextareaComponent>
	<DesignIconComponent v-else-if="componentModel.type=='icon'" :componentModel="componentModel">

	</DesignIconComponent>
	<template v-else-if="componentModel.type=='div'">
		<draggable :list="componentModel.children"
			v-bind="{group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}"
			@add="onAddComponentHandler">
			<DesignDivComponent :componentModel="componentModel">
				<DesignComponentFactory :componentModel="childComponentModel"
					v-for="(childComponentModel) in componentModel.children" :key="childComponentModel.id">
				</DesignComponentFactory>
			</DesignDivComponent>
		</draggable>
	</template>
	<DesignGroupTitleComponent v-else-if="componentModel.type=='grouptitle'" :componentModel="componentModel">

	</DesignGroupTitleComponent>
	<DesignCheckboxComponent v-else-if="componentModel.type=='checkbox'" :componentModel="componentModel">

	</DesignCheckboxComponent>
	<DesignHiddenComponent v-else-if="componentModel.type=='hidden'" :componentModel="componentModel">

	</DesignHiddenComponent>
	<DesignListViewComponent v-else-if="componentModel.type=='mlistview'" :componentModel="componentModel">
		<DesignComponentFactory :componentModel="childComponentModel"
			v-for="(childComponentModel) in componentModel.children" :key="childComponentModel.id">
		</DesignComponentFactory>
	</DesignListViewComponent>
	<DesignImageComponent v-else-if="componentModel.type=='image'" :componentModel="componentModel">

	</DesignImageComponent>
	<DesignSwitchComponent v-else-if="componentModel.type=='switch'" :componentModel="componentModel">

	</DesignSwitchComponent>
	<DesignTagComponent v-else-if="componentModel.type=='tag'" :componentModel="componentModel">

	</DesignTagComponent>
	<DesignFormulaComponent v-else-if="componentModel.type=='formula'" :componentModel="componentModel">

	</DesignFormulaComponent>
	<DesignRollUpSummaryComponent v-else-if="componentModel.type=='rollupsummary'" :componentModel="componentModel">

	</DesignRollUpSummaryComponent>
	<DesignLinkRecordComponent v-else-if="componentModel.type=='linkrecord'" :componentModel="componentModel">

	</DesignLinkRecordComponent>
	<DesignTreePathComponent v-else-if="componentModel.type=='treepath'" :componentModel="componentModel">

	</DesignTreePathComponent>
	<DesignVBarChartComponent v-else-if="componentModel.type=='vbarchart'" :componentModel="componentModel">

	</DesignVBarChartComponent>
	<DesignHBarChartComponent v-else-if="componentModel.type=='hbarchart'" :componentModel="componentModel">

	</DesignHBarChartComponent>
	<DesignLineChartComponent v-else-if="componentModel.type=='linechart'" :componentModel="componentModel">

	</DesignLineChartComponent>
	<DesignPieChartComponent v-else-if="componentModel.type=='piechart'" :componentModel="componentModel">

	</DesignPieChartComponent>
	<DesignWebSocketComponent v-else-if="componentModel.type=='websocket'" :componentModel="componentModel">

	</DesignWebSocketComponent>
	<DesignUReport2Component v-else-if="componentModel.type=='ureport2'" :componentModel="componentModel">

	</DesignUReport2Component>
	<DesignDashboardPageComponent v-else-if="componentModel.type=='dashboardpage'" :componentModel="componentModel">

	</DesignDashboardPageComponent>
	<DesignDataGridComponent v-else-if="componentModel.type=='datagrid'" :componentModel="componentModel">
		<DesignComponentFactory :componentModel="childComponentModel"
			v-for="(childComponentModel) in componentModel.children" :key="childComponentModel.id">
		</DesignComponentFactory>
	</DesignDataGridComponent>
	<DesignDataGridColumnComponent v-else-if="componentModel.type=='datagridcolumn'" :componentModel="componentModel">
		<DesignComponentFactory :componentModel="childComponentModel"
			v-for="(childComponentModel) in componentModel.children" :key="childComponentModel.id">
		</DesignComponentFactory>
	</DesignDataGridColumnComponent>
	<DesignFilterGroupComponent v-else-if="componentModel.type=='filtergroup'" :componentModel="componentModel">

	</DesignFilterGroupComponent>
	<DesignRadioListComponent v-else-if="componentModel.type=='radiolist'" :componentModel="componentModel">

	</DesignRadioListComponent>
	<DesignCheckboxListComponent v-else-if="componentModel.type=='checkboxlist'" :componentModel="componentModel">

	</DesignCheckboxListComponent>
	<DesignWorkflowStepsComponent v-else-if="componentModel.type=='workflowsteps'" :componentModel="componentModel">

	</DesignWorkflowStepsComponent>
	<DesignGaugeComponent v-else-if="componentModel.type=='gauge'" :componentModel="componentModel">

	</DesignGaugeComponent>
	<DesignDetailReportComponent v-else-if="componentModel.type=='detailreport'" :componentModel="componentModel">
	
	</DesignDetailReportComponent>
	<DesignIndicatorTableComponent v-else-if="componentModel.type=='indicatortable'" :componentModel="componentModel">
	
	</DesignIndicatorTableComponent>
	<DesignSummaryReportComponent v-else-if="componentModel.type=='summaryreport'" :componentModel="componentModel">
	
	</DesignSummaryReportComponent>
</template>

<script>
	import DesignPageComponent from './DesignPageComponent.vue';
	import DesignLabelComponent from './DesignLabelComponent.vue';
	import DesignNavBarComponent from './DesignNavBarComponent.vue';
	import DesignTextComponent from './DesignTextComponent.vue';
	import DesignNumberComponent from './DesignNumberComponent.vue';
	import DesignSelectComponent from './DesignSelectComponent.vue';
	import DesignSearchComponent from './DesignSearchComponent.vue';
	import DesignDatetimeComponent from './DesignDatetimeComponent.vue';
	import DesignDateComponent from './DesignDateComponent.vue';
	import DesignTimeComponent from './DesignTimeComponent.vue';
	import DesignButtonComponent from './DesignButtonComponent.vue';
	import DesignRowComponent from './DesignRowComponent.vue';
	import DesignColComponent from './DesignColComponent.vue';
	import DesignTextareaComponent from './DesignTextareaComponent.vue';
	import DesignIconComponent from './DesignIconComponent.vue';
	import DesignDivComponent from './DesignDivComponent.vue';
	import DesignGroupTitleComponent from './DesignGroupTitleComponent.vue';
	import DesignCheckboxComponent from './DesignCheckboxComponent.vue';
	import DesignHiddenComponent from './DesignHiddenComponent.vue';
	import DesignListViewComponent from './DesignListViewComponent.vue';
	import DesignImageComponent from './DesignImageComponent.vue';
	import DesignSwitchComponent from './DesignSwitchComponent.vue';
	import DesignTagComponent from './DesignTagComponent.vue';
	import DesignFormulaComponent from './DesignFormulaComponent.vue';
	import DesignRollUpSummaryComponent from './DesignRollUpSummaryComponent.vue';
	import DesignLinkRecordComponent from './DesignLinkRecordComponent.vue';
	import DesignTreePathComponent from './DesignTreePathComponent.vue';
	import DesignVBarChartComponent from './DesignVBarChartComponent.vue';
	import DesignHBarChartComponent from './DesignHBarChartComponent.vue';
	import DesignLineChartComponent from './DesignLineChartComponent.vue';
	import DesignPieChartComponent from './DesignPieChartComponent.vue';
	import DesignWebSocketComponent from './DesignWebSocketComponent.vue';
	import DesignUReport2Component from './DesignUReport2Component.vue';
	import DesignDashboardPageComponent from './DesignDashboardPageComponent.vue';
	import DesignDataGridComponent from './DesignDataGridComponent.vue';
	import DesignDataGridColumnComponent from './DesignDataGridColumnComponent.vue';
	import DesignFilterGroupComponent from './DesignFilterGroupComponent.vue';
	import DesignRadioListComponent from './DesignRadioListComponent.vue';
	import DesignCheckboxListComponent from './DesignCheckboxListComponent.vue';
	import DesignWorkflowStepsComponent from './DesignWorkflowStepsComponent.vue';
	import DesignGaugeComponent from './DesignGaugeComponent.vue';
	import DesignDetailReportComponent from './DesignDetailReportComponent.vue';
	import DesignIndicatorTableComponent from './DesignIndicatorTableComponent.vue';
	import DesignSummaryReportComponent from './DesignSummaryReportComponent.vue';
	import utils from '@/utils/utils.js';
	import {
		VueDraggableNext
	} from 'vue-draggable-next';
	export default {
		name: "DesignComponentFactory",
		components: {
			draggable: VueDraggableNext,
			DesignPageComponent,
			DesignLabelComponent,
			DesignNavBarComponent,
			DesignTextComponent,
			DesignNumberComponent,
			DesignSelectComponent,
			DesignSearchComponent,
			DesignDatetimeComponent,
			DesignDateComponent,
			DesignTimeComponent,
			DesignButtonComponent,
			DesignRowComponent,
			DesignColComponent,
			DesignTextareaComponent,
			DesignIconComponent,
			DesignDivComponent,
			DesignGroupTitleComponent,
			DesignCheckboxComponent,
			DesignHiddenComponent,
			DesignListViewComponent,
			DesignImageComponent,
			DesignSwitchComponent,
			DesignTagComponent,
			DesignFormulaComponent,
			DesignRollUpSummaryComponent,
			DesignLinkRecordComponent,
			DesignTreePathComponent,
			DesignVBarChartComponent,
			DesignHBarChartComponent,
			DesignLineChartComponent,
			DesignPieChartComponent,
			DesignWebSocketComponent,
			DesignUReport2Component,
			DesignDashboardPageComponent,
			DesignDataGridComponent,
			DesignDataGridColumnComponent,
			DesignFilterGroupComponent,
			DesignRadioListComponent,
			DesignCheckboxListComponent,
			DesignWorkflowStepsComponent,
			DesignGaugeComponent,
			DesignDetailReportComponent,
			DesignIndicatorTableComponent,
			DesignSummaryReportComponent
		},
		props: [
			"componentModel"
		],
		data() {
			return {
				selectedTabsName: "",
				selected: false,
				currentIndex: 0,
				isChildClick: false,
				currentTabInstance: null,
				"propertySet": [{
					"key": "ID",
					"label": "ID",
					"editor": "label"
				}],
				"propertySet2": [{
					"key": "ID",
					"label": "ID",
					"editor": "label"
				}, {
					"key": "labelExpression",
					"label": "标题",
					"editor": "text"
				}],
				"currentComponentModel": this.componentModel
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
		},
		beforeUnmount() {
			utils.removeArrayElement(this.children, this);
		},
		methods: {
			onTabsClickHandler() {
				var className = event.target.className;
				if (className.indexOf("van-tab__text") != -1) {
					this.isChildClick = true;
					this.$store.state.isTabsChildClick = true;
					this.$store.state.mformDesigner.getComponentTree().setSelectedData(this.componentModel.children[this
						.currentIndex]);
					this.currentComponentModel["selectedChildModel"] = this.componentModel.children[this.currentIndex];
				} else {
					this.isChildClick = false;
					this.$store.state.isTabsChildClick = false;
					this.$store.state.mformDesigner.getComponentTree().setSelectedData(this.componentModel);
				}
				if (this.$store.state.mformDesigner.getSelectedDesignComponent() != null) {
					this.$store.state.mformDesigner.getSelectedDesignComponent().setSelected(false);
				}
				this.$store.state.mformDesigner.setSelectedDesignComponent(this);
				this.setSelected(true);
				this.$store.state.mformDesigner.getPropertyTable().setSelectedComponent(this);
			},
			setSelected(selected) {
				this.selected = selected;
			},
			onTabClick(item) {
				for (var i = 0; i < this.componentModel.children.length; i++) {
					if (this.componentModel.children[i].id == item.name) {
						this.currentIndex = i;
						break;
					}
				}
			},
			getPropertyValue(propertyKey) {
				if (this.isChildClick) {
					return this.getPropertyValue2(propertyKey);
				}
				if (propertyKey == "ID") {
					return this.componentModel.id;
				}
				var propertyMap = this.componentModel["propertyMap"];
				if (propertyMap == undefined) {
					this.currentComponentModel["propertyMap"] = {};
					return undefined;
				}
				var value = propertyMap[propertyKey];
				return value;
			},
			setPropertyValue(propertyKey, propertyValue) {
				if (this.isChildClick) {
					this.setPropertyValue2(propertyKey, propertyValue);
					return;
				}
				var propertyMap = this.componentModel["propertyMap"];
				if (propertyMap == undefined) {
					propertyMap = {};
					this.currentComponentModel["propertyMap"] = propertyMap;
				}
				propertyMap[propertyKey] = propertyValue;
			},
			getPropertyValue2(propertyKey) {
				var childComponentModel = this.componentModel.children[this.currentIndex];
				if (propertyKey == "ID") {
					return childComponentModel.id;
				} else if (propertyKey == "labelExpression") {
					return childComponentModel.labelExpression;
				}
				var propertyMap = childComponentModel["propertyMap"];
				if (propertyMap == undefined) {
					childComponentModel["propertyMap"] = {};
					return undefined;
				}
				var value = childComponentModel[propertyKey];
				return value;
			},
			setPropertyValue2(propertyKey, propertyValue) {
				var childComponentModel = this.componentModel.children[this.currentIndex];
				var propertyMap = childComponentModel["propertyMap"];
				if (propertyMap == undefined) {
					propertyMap = {};
					childComponentModel["propertyMap"] = propertyMap;
				}
				propertyMap[propertyKey] = propertyValue;
				if (propertyKey == "labelExpression") {
					childComponentModel.labelExpression = propertyValue;
					//$(this.$el).find(".el-tabs__item is-top.is-active").html(propertyValue);
					this.$store.state.mformDesigner.getComponentTree().updateNodeName({
						"id": childComponentModel.id,
						"name": propertyValue
					});
				}
			},
			getSelectedChildModel() {
				return this.componentModel.children[this.currentIndex];
			},
			setCurrentTab() {

			},
			onAddComponentHandler() {}
		}
	}
</script>

<style>
	.tabs-normal-state {
		border: 1px gray dashed;
		margin: 0px;
	}

	.tabs-selected-state {
		border: 1px #FF4D51 dashed;
		margin: 0px;
	}
</style>
